<template>
    <div class="index">


        <div class="detail">
            <h2>采购订单详情</h2>
            <div class="btn">
                <el-button   @click="Edit" v-show="State == 'draft'">编辑</el-button>
                <el-button type="primary" v-show="State == 'draft'" @click="sureState">确认采购</el-button>
                <el-button type="info" v-show="State == 'draft'" @click="cancelState">取消订单</el-button>
                <el-button type="text">
                    <el-dropdown trigger="click">
                        <span class="dropdownLink">
                            <p>打印<i class="el-icon-caret-bottom el-icon--right"></i></p>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item @click.native="pOrderContactPrint">采购合同</el-dropdown-item>
                            <!-- <el-dropdown-item @click.native="print1">订单审核表11</el-dropdown-item> -->


                        </el-dropdown-menu>
                    </el-dropdown>
                </el-button>
            </div>
            <el-descriptions title="" :column="3" :border='true' class="tab" :contentStyle="CS">
                <el-descriptions-item label="订单名称">{{ result.name }}</el-descriptions-item>
                <el-descriptions-item label="供应商"><a @click="alertSupplier">{{ result2.displayName
                }}</a></el-descriptions-item>
                <el-descriptions-item label="来源">{{ result.origin }}</el-descriptions-item>
                <el-descriptions-item label="订单日期">{{ result.dateOrder }}</el-descriptions-item>
                <el-descriptions-item label="核准日期">{{ result.dateApprove }}</el-descriptions-item>
                <el-descriptions-item label="联系电话">{{ result2.phone }}</el-descriptions-item>
                <el-descriptions-item label="统一社会信用代码">{{ result2.vat }}</el-descriptions-item>
                <el-descriptions-item label="银行账户号码">{{ result2.accNumber }}</el-descriptions-item>
                <el-descriptions-item label="银行名称">{{ result2.bankName }}</el-descriptions-item>
                <el-descriptions-item label="币种">{{ result.currencyName }}</el-descriptions-item>
                <el-descriptions-item label="状态">{{ result.state }}</el-descriptions-item>

                <!-- <el-descriptions-item label="发票数量">{{ result.invoiceCount }}</el-descriptions-item> -->
                <!-- <el-descriptions-item label="账单状态">{{ result.invoiceStatus }}</el-descriptions-item> -->
                <!-- <el-descriptions-item label="Receptions">{{ result.pickingCount }}</el-descriptions-item> -->
                <el-descriptions-item label="预定交货日期">{{ result.datePlanned }}</el-descriptions-item>
                <!-- <el-descriptions-item label="不含税总额">{{ result.amountUntaxed }}</el-descriptions-item> -->
                <!-- <el-descriptions-item label="税额">{{ result.amountTax }}</el-descriptions-item> -->
                <!-- <el-descriptions-item label="订单总额">{{ result.amountTotal }}</el-descriptions-item> -->
                <el-descriptions-item label="创建者">{{ result.createUserName }}</el-descriptions-item>
                <!-- <el-descriptions-item label="Deliver To">{{ result.pickingTypeId }}</el-descriptions-item> -->
                <!-- <el-descriptions-item label="组id">{{ result.groupId }}</el-descriptions-item> -->
                <el-descriptions-item label="创建日期">{{ result.createDate }}</el-descriptions-item>
                <el-descriptions-item label="最后更新者">{{ result.writeUserName }}</el-descriptions-item>
                <el-descriptions-item label="最后更新时间">{{ result.writeDate }}</el-descriptions-item>
                <!-- <el-descriptions-item label="采购单号">{{ result.purchaseNum }}</el-descriptions-item> -->
                <el-descriptions-item label="订单编号">{{ result.orderNum }}</el-descriptions-item>
                <!-- <el-descriptions-item label="公司电话">{{ result.telId }}</el-descriptions-item> -->
                <!-- <el-descriptions-item label="公司邮箱">{{ result.emailId }}</el-descriptions-item> -->
                <el-descriptions-item label="编制">{{ result.createMen }}</el-descriptions-item>
                <el-descriptions-item label="采购信息">{{ result.notes }}</el-descriptions-item>

            </el-descriptions>
            <!-- 合计show-summary -->
            <el-table :data="tableData" style="width: 90%;margin: -15px auto;" border
                :header-cell-style="{ background: '#f8f8f9', color: 'black', 'text-align': 'center' }"
                >

                <el-table-column prop="sequence" label="序号">
                </el-table-column>
                <el-table-column prop="name" label="产品" width="180" class="hand-cursor">
                    <template slot-scope="scope">

                        <div @click="stockdetail(scope.row)">

                            <a href="javascript:;">{{ scope.row.name }}</a>
                            </div>
                    </template>

                </el-table-column>
                <el-table-column prop="partMessage" label="说明">
                </el-table-column>

                <el-table-column prop="datePlanned" label="预定交货日期" width="180">
                </el-table-column>
                <el-table-column prop="productQty" label="数量">
                </el-table-column>
                <el-table-column prop="qtyReceived" label="已接收数量">
                </el-table-column>
                <!-- <el-table-column prop="qtyInvoiced" label="开单数量">
                </el-table-column> -->
                <el-table-column prop="priceUnit" label="单价">
                </el-table-column>
                <el-table-column prop="stockNum" label="库存量">
                </el-table-column>
                <el-table-column prop="productUomName" label="单位">
                </el-table-column>
                <el-table-column prop="priceSubtotal" label="小计">
                </el-table-column>


            </el-table>

            <div class="total">
                <div class="totalright">
                    <p>总计：<strong>￥{{ amountTotal }}</strong></p>
                    <p>金额大写：<strong>{{ amountTotalDaxie }}</strong></p>
                </div>
            </div>

        </div>
        <!-- 操作详情 -->
        <div class="product">
            <el-table :data="tableData2" style="width: 100%" border :header-cell-style="{ 'text-align': 'center' }"
                :cell-style="{ 'text-align': 'center' }">


                <el-table-column prop="handleMan" label="操作人">
                </el-table-column>
                <el-table-column prop="handleType" label="操作类型">
                </el-table-column>
                <el-table-column prop="recordTime" label="操作时间">
                </el-table-column>
                <el-table-column prop="handleNum" label="操作数量">
                </el-table-column>
                <el-table-column prop="purchaseOrderMsg" label="操作信息">
                </el-table-column>

            </el-table>
        </div>
        <el-dialog :visible.sync="openSupplier" width="1500px" append-to-body>
            <Supplierdetail :fid="result2.id"></Supplierdetail>
        </el-dialog>
        <div v-if="showStock">
        <el-dialog :visible.sync="openStock" width="1500px" append-to-body @close='closeDialog'>
            <Stockdetail :fid="stockid"></Stockdetail>
        </el-dialog>
    </div>
    <el-dialog :visible.sync="openEditPur" width="1800px" append-to-body :destroy-on-colse="true" > 
            <Purchaseedit @transfer="getOpenEditPur" :fid="PurOrderId"></Purchaseedit>
        </el-dialog>
    </div>
</template>
<script>
import { downloadTemplate, downloadBlob, exportFile } from '@/utils/print.js'
import { getcz, getPerchase, getPerchasedetail, getsupplier, cancelState, sureState, pOrderContact } from "@/api/system/perchase";


export default {
    data() {
        return {
            // 采购订单编辑弹框
            openEditPur: false,
            // 传给子组件的id
            PurOrderId:parseInt(this.$route.query.listId),
            // 是否显示弹框，用来解决第二次弹框组件内容没变化的问题
            showStock:true,
            // 传给库存详情页的id
            stockid: null,
            // 库存详情弹框
            openStock: false,
            // 供应商详情弹框
            openSupplier: false,
            // 列表描述单元格的样式
            CS: {
                //   'text-align': 'center',  //文本居中
                'max-width': '280px',   //最小宽度
                'word-break': 'break-all'  //过长时自动换行
            },
            State: null,
            // 列表详情
            result: {},
            // 产品订单行表格
            tableData: [],
            //操作详情表格
            tableData2: [],
            // 供应商信息
            result2: {},
            // 总价
            amountTotal: 0,
            // 大写
            amountTotalDaxie: '零',
        };
    },
    mounted() {
        // 通过$route.query将传过来的值接收;
        let id = this.fid||this.$route.query.listId;
        // this.tableData = this.$route.query.manageList;
        this.getList(id);
        this.getczdetail(id)
        this.getsupplier(id)
    },
    methods: {
         // 子组件销售订单编辑传过来的参数
         getOpenEditPur(msg,id) {
            // console.log(msg);
            this.openEditPur = msg
            this.getList(id)       
     },
        // 跳转编辑页面
        Edit() {
            this.openEditPur=true
        },
        // 确认采购订单
        sureState() {
            const id = this.$route.query.listId;
            sureState(id).then(res => {
                // console.log(res);
                this.getList(id);
            })

        },
        // 取消采购订单
        cancelState() {
            const id = this.$route.query.listId;
            cancelState(id).then(res => {
                // console.log(res);
                this.getList(id);
            })

        },
        // 列表详情
        getList(id) {
            getPerchase(id).then(res => {
                // console.log(res);
                // console.log('12346546');
                this.result = res.data
                this.State = res.data.state
                this.tableData = res.data.purchaseOrderParts
                // console.log( this.State);
                this.amountTotal = res.data.amountTotal
                this.amountTotalDaxie = res.data.amountTotalDaxie
                // console.log(this.result);
            })
        },
        // 表格详情
        getczdetail(id) {
            getcz(id).then(response => {
                // console.log(response);
                this.tableData2 = response.data;
                // this.title = "操作详情";
            });
        },
        // 点击产品名称弹出详情
        stockdetail(row) {
            // console.log(row.productTemplateId)
            this.showStock=true
            this.openStock = true
            this.stockid = row.productTemplateId
        },
        // 获取供应商信息
        getsupplier(id) {
            getsupplier(id).then(res => {
                // console.log(res);
                this.result2 = res.data[0]
            })
        },
        // 打印采购合同
        pOrderContactPrint() {
            let id = this.$route.query.listId;
            this.$confirm('是否打印采购合同?', "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(function () {
                return pOrderContact();
            }).then(response => {
                // console.log(response);
                // console.log(response.headers['content-disposition']);
                const name = null
                const dixed = '采购合同'
                // downloadTemplate("ccc",'/system/print/ok')
                downloadBlob(response, name, dixed);
            }).catch(function (err) {
                // console.log(err);
            });
        },
        // 点击供应商名称弹出详情
        alertSupplier() {
            this.openSupplier = true
        },
        closeDialog() {
            this.showStock=false
        }
        
        
    },
    components: {
        Supplierdetail: () => import('@/views/system/supplierdetail/index.vue'),
        Stockdetail: () => import('@/views/system/stockdetail/index.vue'),
        Purchaseedit: () => import('@/views/system/purchaseedit/index.vue')
    },
    props: {
        fid: {
            type: Number, default: null
        }
    },
    watch: {},
    computed: {},
    created() { },
};
</script>
<style lang="scss"  scoped>
.index {
    // background: #f9f9f9;
    border: 1px transparent solid;


}

.hand-cursor {
    //   cursor: pointer;
}

h2 {
    text-align: center;
    line-height: 80px;
}


.detail {
    background: #fff;
    border: 1px rgb(232, 228, 228) solid;
    // box-shadow: 0 3px 20px -15px #000000;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin: 10px auto;
    width: 80%;

    .btn {
        width: 90%;
        text-align: right;
        // border: 1px red solid;
        // margin-left: 77%;
        margin: 0 auto;

    }

    .tab {
        width: 90%;
        margin: 20px auto;
    }

    .line {
        margin: 30px auto;
        // border: 1px rgb(224, 17, 17) solid;
        padding: 10px;
        height: 20px;
    }

    .total {

        // border: 1px red solid;
        width: 90%;
        margin: 50px auto;

        // margin: 40px 60% 30px;
        // border-top: 2px gray solid;
        // text-align:right;
        .totalright {
            width: 30%;
            // float: right;
            margin-left: 70%;
            border-top: 2px gray solid;

            p {
                line-height: 40px;
                text-align: right;
            }
        }

    }



}

.product {
    width: 80%;
    background: #fff;
    border: 1px rgb(232, 228, 228) solid;
    // box-shadow: 0 3px 20px -15px #000000;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin: 10px auto;
}

.my-content {
    background: #1f1e1e;
}


::v-deep .el-descriptions-item__label.is-bordered-label {
    font-weight: bold;
    color: #6d6a6a;
    background: #f8f8f9;
}</style>